<html>
    <head>
    <title>Original</title>
    <script type="text/javascript">
    function modifyAfterDelay() {
        setTimeout('addElement()', 1000)
        setTimeout('removeElement()', 1000)
        setTimeout('hideElement()', 1000)
        setTimeout('changeContent()', 1000)
        setTimeout('changeTitle()', 1000)
        setTimeout('unhideContent()', 1000)
        setTimeout('enableContent()', 1000)
        setTimeout('readwriteContent()', 1000)
    }

    function addElement() {
      var div = document.createElement('div')
      div.setAttribute('id', 'new div')
      div.innerHTML = 'New Element'
      document.getElementById("container").appendChild(div)
    }

    function removeElement() {
      document.getElementById("not_present").remove()
    }

    function hideElement() {
      document.getElementById("hide_delay").style.display = 'none';
    }

    function changeTitle() {
        document.title = "Changed"
        document.bgColor = '#FF00FF'
    }

    function changeContent() {
        document.getElementById("content").firstChild.nodeValue = "New Content"
    }

    function unhideContent() {
        document.getElementById("hidden").style.display = "block"
    }

    function enableContent() {
        document.getElementById("disabled").disabled = false;
    }

    function readwriteContent() {
        document.getElementById("readonly").readOnly = false;
    }
    </script>
    </head>

    <body onload="modifyAfterDelay()">
    <div id="content" style="color: white; background: red">This is content</div>
    <div id="container"></div>
    <div id="not_present">Element that should disappear</div>
    <div id="hide_delay">Element that should set display:none</div>
    <div id="hidden" style="display:none;">Initially hidden content</div>
    <button id="disabled" disabled>Initially disabled content</button>
    <input id="readonly" value="Initially readonly" readonly>
    </body>
</html>
